<template>
  <!-- 车源详情 -->
  <page-loading :show="showPage">
  <view class="container">
    <u-toast ref="uToast" />
    <!-- <u-navbar title-color="#000" back-icon-color="#565353" :background="{backgroundColor:'#FBD220'}" title="车源详情"
      title-size="32" back-icon-size="38"> -->
    <!-- <view class="slot-wrap flex" @click="fenx(carXqList)">
        <text>分享</text>
        <view class="share-icon">
          <i-icon icon="iconfenxiang" type="single" size="32rpx" color="#323232"></i-icon>
        </view>
      </view> -->
    </u-navbar>
    <!-- 分享详情海报弹窗 -->
    <view class="popup-box" v-if="haibaotrue">
      <view class="popopwubj">
        <!-- <poster-share></poster-share> -->
      </view>
    </view>
    <view class="main">
      <view class="wrap">
        <u-swiper mode='round' interval='4000' height='500' :list="bannar" @click="bigimgList"></u-swiper>
      </view>
      <view class="car-data boxS">
        <view class="car-data-title text-line">
          <text>{{carXqList.car_Type_Name}}{{carXqList.configuration_Name}}</text>
          <!-- <text style="margin-left: 10rpx;">{{goodDetail.carname}}</text> -->
        </view>
        <view class="car-data-mid text-line flex flex-ai-bl flex-jc-sb">
          <text class="mid-p">￥{{carXqList.bus_Price}}</text>

          <view>
            <text>指导价：{{carXqList.factory_Price}}/</text>
            <view style="display: inline-flex;" class="flex-ai-c">
              <i-icon icon="iconxiajiang" size="32rpx" color="#60C534"></i-icon>
              <text>{{carXqList.difference}}</text>
            </view>
          </view>
        </view>
        <view class="borders"></view>
        <view class="car-data-bottom" @click="canshu">
          <i-icon icon="iconcanshu" type="single" size="32rpx" color="#666666"></i-icon>
          <text class="ml-20">车型参数</text>
          <u-icon name="arrow-right" color="#9A9A9A" size="24rpx" class="icon-right-box"></u-icon>
        </view>
      </view>
      <view class="car-specif boxS">
        <view class="car-specif-item">
          <text>规格</text>
          <text class="text-line specif-right">{{carXqList.specification}}</text>
        </view>
        <view class="car-specif-item" :class="colorShow" :style="{height: cheight + 'rpx'}" @click="colorCloick">
          <text>外观/内饰</text>
          <view class="text-line specif-right" v-if="colorData">
            <view class="tes">
              <view class="colors" :style="{background: colorData[0].outerColour.colorCoding}"></view>
              <view style="margin-right: 6rpx;" class="text-line">{{colorData[0].outerColour.color}}</view>
              -<view style="margin-right: 6rpx;margin-left: 10rpx;" class="text-line">{{colorData[0].inColour.color}}</view>
              <view class="colors" v-if="colorData[0].inColour.neiColor.length === 1" :style="{background: colorData[0].inColour.neiColor[0]}"></view>
              <view class="colors" v-if="colorData[0].inColour.neiColor.length === 2">
                <view style="height: 20rpx;width: 40rpx;border-radius: 20rpx 20rpx 0 0;" :style="{background: colorData[0].inColour.neiColor[0]}"></view>
                <view style="height: 20rpx;width: 40rpx;border-radius: 0 0 20rpx 20rpx;" :style="{background: colorData[0].inColour.neiColor[1]}"></view>
              </view>
            </view>
          </view>
          <u-icon style="margin-left: 500rpx;margin-top: 5rpx;" name="arrow-down-fill" color="#E1E1E1" size="24rpx"></u-icon>
        </view>
        <!-- 弹开颜色集 -->
        <view class="colorboxs">
          <view class="tesss flex flex-jc-fe" v-for="(item,index) in colorData" :key="index" v-show="colorShow == 'isshow'">
            <view class="colors3" :style="{background: item.outerColour.colorCoding}"></view>
            <view class="textsdfsd">{{item.outerColour.color}}</view>
            /<view class="textgddf">{{item.inColour.color}}</view>
            <view class="colors3" v-if="item.inColour.neiColor.length === 1" :style="{background: item.inColour.neiColor[0]}"></view>
            <view class="colors3" v-if="item.inColour.neiColor.length === 2">
              <view style="height: 20rpx;width: 40rpx;border-radius: 20rpx 20rpx 0 0;" :style="{background: item.inColour.neiColor[0]}"></view>
              <view style="height: 20rpx;width: 40rpx;border-radius: 0 0 20rpx 20rpx;" :style="{background: item.inColour.neiColor[1]}"></view>
            </view>
          </view>
        </view>
        <view class="car-specif-item">
          <text>车源状态</text>
          <text class="text-line specif-right">{{carXqList.car_Status}}</text>
        </view>
        <view class="car-specif-item">
          <text>车辆所在地</text>
          <text class="text-line specif-right">{{carXqList.car_location_name}}</text>
        </view>
        <view class="car-specif-item">
          <text>销售区域</text>
          <text class="text-line specif-right">{{carXqList.sales_Territory_Name}}</text>
        </view>
        <view class="car-specif-item">
          <text>车辆合格证</text>
          <text class="text-line specif-right">{{carXqList.conformity_Certificate}}</text>
        </view>
        <view class="car-specif-item">
          <text>生产日期</text>
          <text class="text-line specif-right">{{carXqList.produced_Date}}</text>
        </view>
      </view>
      <view class="remarks boxS">
        <view class="r-head">备注</view>
        <view class="r-text" v-show="carXqList.bus_Remarks">{{carXqList.bus_Remarks}}</view>
        <view class="r-text" v-show="!carXqList.bus_Remarks">暂无备注</view>
      </view>
      <view class="shop boxS" v-if="storeidP">
        <view class="shopImg">
          <image v-show="!carXqList.store_Topimg" :src="$store.state.defaultHeaderImg" mode="aspectFill"></image>
          <image v-show="carXqList.store_Topimg" :src="carXqList.store_Topimg" mode="aspectFill"></image>
        </view>
        <view class="shop-data">
          <!-- {{carXqList.store_Name}} -->
          <view class="shop-name ">{{carXqList.store_Name}}</view>
          <view class="shop-z text-line">
            <text>主营：</text>
            <text>{{carXqList.specification}}</text>
          </view>
          <view class="shop-p text-line">
            <text>评分：</text>
            <text>{{carXqList.score}}</text>
          </view>
        </view>

        <!-- 点击跳转到店铺前台 -->
        <view class="jindiangg" @click="goStorePage()">
          进店逛逛
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <view class="footer">
      <view class="flex">
        <view class="lianxi" @click="callPhone(carXqList.phone)">
          <view class="ixoncss">
            <i-icon icon="iconlianxi" type="single" size="30rpx" color="#FFE23E"></i-icon>
          </view>
          <text class="ixonname">
            联系
          </text>
        </view>
        <view class="xiaoxi" @click='contactSeller(carXqList)'>
          <view class="ixoncss">
            <i-icon icon="iconxiaoxi" type="single" size="30rpx" color="#FFE23E"></i-icon>
          </view>
          <text class="ixonname">
            消息
          </text>
        </view>
        <view class="faqijiaoy" @click="faqijiaoy(carXqList.store_Id)">
          发起交易
        </view>
      </view>
    </view>
  </view>
  </page-loading>
</template>

<script src="./productDetail.js"></script>
<style lang="scss" scoped>
  @import "./productDetail.scss";
</style>
